<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');	
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <?php		
        $_img = '<a title="'.$this->htmlEscape($this->getImageLabel()).'" class="main-image"><img id="image" width="570" height="320" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(570, 320).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php else: ?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(570, 320).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
	<input type="hidden" id="moreviewCount" value="<?php echo count($this->getGalleryImages())?>"/>
    <?php if(count($this->getGalleryImages()) > 4):?>
		<div class="scroll-up">
			<img width="130" class="pointer" src="<?php echo $this->getSkinUrl('images/button-up.png')?>">
		</div>
	<?php endif;?>
    <div id="slideContainer">
		<ul id="<?php if(count($this->getGalleryImages()) > 4) echo 'slide'; else echo 'noslide';?>">
		<?php $i=0;foreach ($this->getGalleryImages() as $_image): ?>			
			<li>
				<?php if($_image->getFile() == $_product->getImage()):?>
					<input type="hidden" id="baseIndex" value="<?php echo $i?>"/>
				<?php endif?>
				<a class="moreview-image" data-fancybox-group="thumb" data-position="<?php echo $i?>" smallImg="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(570, 320); ?>" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->getImageLabel() ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(130, 75); ?>" width="130" height="75" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
			</li>
			<?php $i++?>
		<?php endforeach; ?>
		</ul>
	</div>
	<?php if(count($this->getGalleryImages()) > 4):?>
		<div class="scroll-down">
			<img class="pointer" width="130" src="<?php echo $this->getSkinUrl('images/button-down.png')?>">
		</div>
	<?php endif;?>
</div>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        if($('moreviewCount') && $('moreviewCount').value > 4){
			jQuery("#slideContainer").jCarouselLite({
				btnNext: ".scroll-up .pointer",
				btnPrev: ".scroll-down .pointer",
				visible: 4,
				vertical: true
			});
		}else{
			decorateList('noslide');
		}		
		
		jQuery('.main-image').click(function(e){
			e.preventDefault();
			var self = this;
			jQuery.fancybox.open(galleryUnique(jQuery('.moreview-image')),{
				helpers : {
					thumbs : {
						width  : 50,
						height : 50
					},
					title : {
						type: 'inside',
						position: 'top'
					}
				},
				loop: false,
				arrows: false,
				nextEffect: 'none',
				prevEffect: 'none',				
				index: typeof(jQuery(self).data('position')) == 'number' ? jQuery(self).data('position') : jQuery('#baseIndex').val()
			});
		});	
		
		jQuery('.moreview-image').click(function(e){
			e.preventDefault();
			
			var mainImage = jQuery('.main-image');	
			
			mainImage.data('position', jQuery(this).data('position'));			
			
			//add loading and change image
			var loading = jQuery('<div class="gallery-loading">Loading...</div>');
			if(mainImage.parent().find('.gallery-loading').length < 1){
				mainImage.find('img').attr('src', jQuery(this).attr('smallImg'));
				mainImage.find('img').load(function(){
					loading.remove();
				});
				mainImage.parent().append(loading);
			}		
		});		
    });
	
	jQuery(function($){
		// jQuery('.product-image-zoom').qtip({
			// content: 'Click to Zoom',
			// position: {
				// my: 'left center',
				// target: 'mouse',
				// viewport: jQuery(window), // Keep it on-screen at all times if possible
				// adjust: {
					// x: 10,  y: 0
				// }
			// },			
			// hide: {
				// fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
			// },
			// style: {
				// classes: 'ui-tooltip-click-to-zoom',
				// tip: false
			// }
		// });
		$("body").prepend("<div class='drag_mouse' style='position:absolute;display:none;z-index:9999;pointer-events:none;cursor:none;'><img src='<?php echo $this->getSkinUrl('images/zoom-cursor-click.png')?>' /></div>")
		
		$(".product-image-zoom").bind('mousemove',function(e){
			$(this).data('focus',true);
			$(".drag_mouse").show().css({
				left:e.pageX + 15,
				top:e.pageY - 12
			})	
		}).mouseout(function(){
			$(".drag_mouse").hide();
			$(this).data('focus',false);
		})		
	});
//]]>
</script>